<template>
	<view class="body">
		<xk-header title="设备控制"></xk-header>
		<view class="content">
			<view class="left-wrap">
				<view class="tab-list">
					<view v-for="item in classList" class='tab-item'  @click="selName(item)">
						<!-- <image :src=" activeClass===item.activeClass ? item.icon : item.noneIcon" alt="暂无图片" style="width: 37rpx;height: 37rpx;"> -->
						<view :class="activeClass===item.activeClass ? 'active': 'none-active'">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="right-wrap">
				<view class="tab-box">
					<view class="select">
						<!-- 		<picker mode="selector" :range="classList" range-key="name" :value="activeClass" @change="selName">
								<view class="className">
									<text class="text">{{classList[activeClass].name}}</text>
									<image :src="(imgUrl+'/wx/select.png')" style="width: 30rpx;" mode="widthFix"></image>
								</view>
							</picker> -->
						<!-- <picker mode="selector" :range="addressList" range-key="name" :value="activeAddress"> -->
						<view class="address" @click="openAreaSelect">
							<text class="one-line text"
								style="max-width: 400rpx;font-size: 24rpx;font-family: PingFangSC, PingFang SC;font-weight: 400;color: #666666;">{{siteName}}</text>
							<image v-show="siteName == '选择楼栋'" :src="(imgUrl+'/wx/select.png')" style="width: 30rpx;"
								mode="widthFix"></image>
							<view v-if="siteName != '选择楼栋'" @click.stop="selectAreaHandle(siteSelect[0])" style="display: inline-block;">
								<u-icon name="close-circle-fill" ></u-icon>
							</view>
						</view>
						<!-- </picker> -->
					</view>
					<view class="search">
						<u--input v-model="searchData" :customStyle="{paddingTop:'3px',paddingLeft:'35px'}"
							@change="inputChange" />
						<image src="../../static/equControl/searchIcon.png" class="input-icon"></image>
					</view>
				</view>

				<view class="main-content">
					<scroll-view :refresher-enabled="true" class="scroll-y" @scrolltolower="getDeviceInfo" scroll-y
						:style="'height:'+scrollViewHeight+'px'">
						<u-checkbox-group @change="checkboxChange" placement='column'>
							<view v-for="(item,index) in deviceInfoList" :key="index">
								<view v-if="deviceInfoList.length > 0" class="list">
									<view
										:class="'list-item bkg' + (activeClass || '0') + (item.conditioner_status || '0') + (item.run_mode || '0')">
										<!-- <label> -->
										<view style="display: flex; align-items: center;">
											<u-checkbox class="my-checkbox" activeColor="transparent"
												iconColor='#047AFE' @change=checkChange(item)
												:customStyle="{position: 'absolute',right: '3px',top:'5px'}"
												:checked='item.isChecked' v-model="item.isChecked"
												:name="item.serial_id">
											</u-checkbox>
											<view
												:class="{'item-title-active':item.conditioner_status==1 || item.conditioner_status ==3,'item-title-none-active':item.conditioner_status==0}"
												style="width: 432rpx;">{{item.device_name}}</view>
										</view>
										<!-- </label> -->
										<view class="address">
											<view :class="{ 'item-title-active':item.conditioner_status==1 || item.conditioner_status ==3 ,
																	'item-title-none-active':item.conditioner_status==0}
																	">
												{{item.site_name}}{{item.install_site}}
											</view>
										</view>
									</view>
								</view>
								<view class="empty-view" v-else>
									<image class="empty-icon" :src="(imgUrl+'/wx/empty_data_icon.png')"></image>
									<view>哎呀，该区域暂无设备信息~</view>
								</view>
							</view>
						</u-checkbox-group>
					</scroll-view>
				</view>
			</view>
		</view>


		<view class="foot common-bottom-view">
			<!-- <checkbox-group>
				<checkbox value="All" /> <text class="text" style="margin-left: 20rpx;">共</text><text
					class="num">15</text><text class="text">个{{classList[activeClass].name}}</text>
			</checkbox-group> -->
			<button class="common-btn btn-plant" style="margin: 20rpx 32rpx;" @click="cancelCheckbox">取消选中</button>
			<button class="common-btn" style="margin: 20rpx 32rpx;" @click="openDialog">一键控制</button>
		</view>

		<uni-popup ref="menjin" type="center">
			<view class="popup-box">
				<image :src="(imgUrl+'/wx/close@3x.png')" class="close-icon" mode="scaleToFill"
					@click="$refs.menjin.close()">
				</image>
				<view class="dialog-log">
					<image
						:src="activeClass == 0 ? imgUrl+'/wx/menjin-tanchuang@3x.png': activeClass == 1 ? imgUrl+'/wx/zhaoming-tanchuang@3x.png':activeClass == 3? imgUrl+'/wx/guangai-tanchuang@3x.png':imgUrl+'/wx/car-tanchuang@3x.png'"
						class="img-icon" mode=""></image>
				</view>
				<view class="popup-title">
					{{activeClass == 0 ? '门禁控制' : activeClass == 1 ? '照明控制' :''}}
				</view>
				<!-- <view class="menjin-content" v-if="activeClass == 0 || activeClass == 3">
					<input class="time-input" v-if="activeClass == 0" v-model="menjingTime"
						placeholder-class="placeholder-custom" type="text" placeholder="请输入开门时长" />
					<input class="time-input" v-if="activeClass == 3" v-model="guangGaiTime"
						placeholder-class="placeholder-custom" type="text" placeholder="请输入灌溉时长" />
					<view style="margin-left: 30rpx;color: #666666;">{{activeClass == 3 ? '分钟' : '秒'}}</view>
				</view> -->
				<view v-if="activeClass == 0 || activeClass == 3">
					<button class="btn-pass" @click="deviceCtrlHandle(1)">打开</button>
					<!-- <button v-if="activeClass == 3" class="btn-close" @click="deviceCtrlHandle(0)">关闭</button> -->
				</view>
				<view v-if="activeClass === 1">
					<view>
						<u-form :model="form" ref="uForm">
							<u-form-item label="亮度">
								<u-slider min="0" max="100" v-model="form.brightness" :showValue='true'></u-slider>
								<!-- <u-input v-model="form.brightness" /> -->
							</u-form-item>
							<u-form-item label="颜色">
								<!-- <u-input v-model="form.color" /> -->
								<u-slider min="0" max="100" v-model="form.color" :showValue='true'></u-slider>
							</u-form-item>
							<u-form-item label="延时时间">
								<!-- <u-input v-model="form.time" /> -->
								<u-slider min="0" max="100" v-model="form.time" :showValue='true'></u-slider>
							</u-form-item>
						</u-form>
						<u-button @click="submit">打开</u-button>
					</view>
					<!-- 01 全开、02、全关、03、半开 -->
					<!-- <button class="btn-open" @click="deviceCtrlHandle('01')">全开</button>
					<button class="btn-open" @click="deviceCtrlHandle('03')">半开</button>
					<button class="btn-close" @click="deviceCtrlHandle('02')">关闭</button> -->
					<!-- 	<view style="height: 100%;width: 100%;">
						<view style="height: 30px;line-height: 30px;display: flex;">
							<view>亮度</view>
							<u--input
							    placeholder="请输入亮度"
							    border="surround"
							    v-model="value_light"
							    @change="change"
							  ></u--input>
						</view>
						<view style="height: 30px;line-height: 30px;display: flex;">
							<view>颜色</view>
							<u--input
							    placeholder="请输入颜色"
							    border="surround"
							    v-model="color"
							    @change="change"
							  ></u--input>
						</view>
						<view style="height: 30px;line-height: 30px;display: flex;">
							<view>延迟时间</view>
							<u--input
							    placeholder="请输入延迟时间"
							    border="surround"
							    v-model="delayTime"
							    @change="change"
							  ></u--input>
						</view>
					</view> -->
				</view>
				<view class="zhaoming-close" v-if="activeClass == 4 ||activeClass == 5">
					<image @click="deviceCtrlHandle(1)" :src="(imgUrl+'/wx/open@3x.png')"
						style="width: 120rpx;height: 120rpx;margin-right: 100rpx;">
					</image>
					<image @click="deviceCtrlHandle(0)" :src="(imgUrl+'/wx/close@3x.png')"
						style="width: 120rpx;height: 120rpx;">
					</image>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="kongtiao" type="center">
			<view class="popup-box">
				<image :src="(imgUrl+'/wx/close@3x.png')" class="close-icon" mode="scaleToFill"
					@click="$refs.kongtiao.close()">
				</image>
				<view class="dialog-log">
					<image :src="imgUrl+'/wx/air-tanchuang@3x.png'" class="img-icon" mode=""></image>
				</view>
				<view class="popup-title">
					空调控制
				</view>
				<!-- <view class="dialog-log">
					<view class="close">

					</view>
					<view class="title">
						空调控制
					</view>
					<view class="btn-submit" @click="$refs.kongtiao.close()">
						关闭
					</view>
				</view> -->
				<!-- 	<view class="shezhi">
					远程锁定
				</view>
				<view>
					<switch :checked="ktParam['control_t40'] == '1'" @change="(e)=>{setKTParam('control_t40', e.target.value ? '1' : '0')}" />
				</view> -->
				<!-- 		<view class="shezhi">
					模式设置
				</view>
				<scroll-view scroll-x class="scroll-X">
					<view class="item" @click="setKTParam('control_t51', '1')">
						<image v-if="ktParam['control_t51'] == '1'" class="icon-img" :src="(imgUrl+'/wx/zhileng-jihuo@3x.png')" mode="widthFix"></image>
						<image v-else class="icon-img" :src="(imgUrl+'/wx/zhileng@3x.png')" mode="widthFix"></image>
						<text :class="ktParam['control_t51'] == '1' ? 'active': 'text'">制冷</text>
					</view>
					<view class="item" @click="setKTParam('control_t51', '4')">
						<image v-if="ktParam['control_t51'] == '4'" class="icon-img" :src="(imgUrl+'/wx/zhire-jihuo@3x.png')" mode="widthFix"></image>
						<image v-else class="icon-img" :src="(imgUrl+'/wx/zhire@3x.png')" mode="widthFix"></image>
						<text :class="ktParam['control_t51'] == '4' ? 'active': 'text'">制热</text>
					</view>
					<view class="item" @click="setKTParam('control_t51', '2')">
						<image v-if="ktParam['control_t51'] == '2'" class="icon-img" :src="(imgUrl+'/wx/chushi-jihuo@3x.png')" mode="widthFix"></image>
						<image v-else class="icon-img" :src="(imgUrl+'/wx/chushi@3x.png')" mode="widthFix"></image>
						<text :class="ktParam['control_t51'] == '2' ? 'active': 'text'">除湿</text>
					</view>
					<view class="item" @click="setKTParam('control_t51', '5')">
						<image v-if="ktParam['control_t51'] == '5'" class="icon-img" :src="(imgUrl+'/wx/auto-jihuo@3x.png')" mode="widthFix"></image>
						<image v-else class="icon-img" :src="(imgUrl+'/wx/auto@3x.png')" mode="widthFix"></image>
						<text :class="ktParam['control_t51'] == '5' ? 'active': 'text'">自动</text>
					</view>
					<view class="item" @click="setKTParam('control_t51', '3')">
						<image v-if="ktParam['control_t51'] == '3'" class="icon-img" :src="(imgUrl+'/wx/songfeng-jihuo@3x.png')" mode="widthFix"></image>
						<image v-else class="icon-img" :src="(imgUrl+'/wx/songfeng@3x.png')" mode="widthFix"></image>
						<text :class="ktParam['control_t51'] == '3' ? 'active': 'text'">送风</text>
					</view>
					<!-- <view class="item">
						<image class="icon-img" src="/static/sleep@3x.png" mode="widthFix"></image>
						<text :class="ktParam['control_t51'] == '1' ? 'active': 'text'">睡眠</text>
					</view> -->
				<!-- 		</scroll-view> -->
				<!-- 		<view class="moshi">
					<view class="col">
						<view class="title">
							风速模式
						</view>
						<view class="item-list">
							<view :class="ktParam['control_t52'] == '1' ? 'item active': 'item'" @click="setKTParam('control_t52', '1')">
								自然风速
							</view>
							<view :class="ktParam['control_t52'] == '6' ? 'item active': 'item'" @click="setKTParam('control_t52', '6')">
								高速
							</view>
							<view :class="ktParam['control_t52'] == '4' ? 'item active': 'item'" @click="setKTParam('control_t52', '4')">
								中速
							</view>
							<view :class="ktParam['control_t52'] == '2' ? 'item active': 'item'" @click="setKTParam('control_t52', '2')">
								低速
							</view>
						</view>
					</view>
				</view>
				<view class="shezhi">
					温度设置
				</view>
				<view>
					<slider :value="ktParam['param_t1']" @change="(e)=>{setKTParam('param_t1', e.detail.value)}" block-size="22" min="17" max="34" show-value />
				</view> -->
				<u-toast ref="uToast"></u-toast>
				<!-- 		<view class="footer" style="padding-bottom: 50rpx;">
					<button class="btn-close" @click="deviceCtrlHandle2(0)">打开</button>
					<button class="btn-close" @click="deviceCtrlHandle2(1)">关闭</button>
					<button class="btn-close" @click="deviceCtrlHandle2(2)">锁定但保持开机状态</button>
					<button class="btn-close" @click="deviceCtrlHandle2(3)">禁止启动</button>
					<button class="btn-close" @click="deviceCtrlHandle2(4)">空调解锁</button> -->
				<!-- <image @click="deviceCtrlHandle(0)" src="/static/colose@3x.png" style="width: 120rpx;margin-right: 50px;" mode="widthFix"></image> -->
				<!-- <image @click="deviceCtrlHandle(1)" src="/static/open@3x.png" style="width: 120rpx;" mode="widthFix"></image> -->
				<!-- </view> -->
				<view class="air-box">
					<view class="air-row">
						<view>开关控制</view>
						<u-switch v-model="openCtrl" @change="changeOpenCtrl"></u-switch>
					</view>
					<view class="air-row">
						<view>空调开关</view>
						<u-switch :disabled='!openCtrl' v-model="airCtrl" @change="changeAirCtrl"></u-switch>
					</view>
					<u-line></u-line>
					<view class="ctrl">
						<view class="over-load" v-show="!openCtrl"></view>
						<view>
							<view class="title">空调模式</view>
							<view class="air-mode-list">
								<view class="air-mode-btn"
									:class="item.id === airSelectIndex ? 'air-active' : 'noneAir-active'"
									v-for="(item,index) in airMode" @click="toggleAir(item,index)">
									<view>{{item.name}}</view>
								</view>
							</view>

							<view class="title">温度(℃)</view>
							<u-slider :showValue='true' v-model="temperature" min="19" max="30"
								@change='changeTemperature'></u-slider>
						</view>
						<view class="title">空调风速</view>
						<view class="air-mode-list">
							<view class="air-mode-btn"
								:class="item.id === airSpeedSelectIndex ? 'air-active' : 'noneAir-active'"
								v-for="(item,index) in airWindSpeed" @click="toggleSpeed(item,index)">
								<view>{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="areaSelectPopup" :mask-click="true" type="bottom">
			<view class="area-list">
				<view class="title">区域选择</view>
				<view>
					<u-search v-model="popupSearchData" shape="square" clearabled :showAction="false" @search="popupSearch" @clear="popupSearchClear"></u-search>
				</view>
				<view class="area-select-content">
					<text class="select-text">
						当前：
					</text>
					<!-- 	<scroll-view :scroll-x="true" :show-scrollbar="false" class="area-select-scroll">
						<view class="area-select">
							<text class="select-item" v-for="(item, index) of 	" :key="index" @click="backArea(index)">
								{{item.site_name}}
							</text>
						</view>
					</scroll-view> -->
				</view>
				<scroll-view class="list-content-scroll" @scrolltolower="loadMoreSite" :scroll-y="true"
					:show-scrollbar="false">
					<view class="list-content">
						<view v-for="(item, index) of siteInfoList" :key="item.site_code" class="list-item"
							@click="selectAreaHandle(item)">
							{{item.site_name}}
							<!-- uni-icons v-if="item.site_code == nowSiteCode.site_code" type="checkbox-filled" size="24"
								style="color: #2C72FF;margin-right: 30rpx;"></uni-icons> -->
							<uni-icons v-if="item.isSite" type="checkbox-filled" size="24"
								style="color: #2C72FF;margin-right: 30rpx;"></uni-icons>
						</view>
					</view>
				</scroll-view>
				<view class="common-bottom-view">
					<view @click="confirmArea" class="common-btn" style="margin:20rpx 32rpx;">关闭</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import moment from 'moment'
	import enterIcon from '@/static/equControl/entranceActive.png'
	import enterNoneActiveIcon from '@/static/equControl/entranceNoneActive.png'
	import airIcon from '@/static/equControl/airActive.png'
	import airNoneActiveIcon from '@/static/equControl/airNoneActive.png'
	import lightIcon from '@/static/equControl/lightActive.png'
	import lightNoneActiveIcon from '@/static/equControl/lightNoneActive.png'
	export default {
		data() {
			return {
				tempList: [],
				show: true,
				airSelectIndex: 1,
				airSpeedSelectIndex: 4,
				openCtrl: false,
				airCtrl: false,
				temperature: 19,
				airWindSpeed: [{
					id: 4,
					name: '低风'
				}, {
					id: 2,
					name: '中风'
				}, {
					id: 1,
					name: '高风'
				}],
				airMode: [{
					id: 1,
					name: '制冷'
				}, {
					id: 2,
					name: '制热'
				}, {
					id: 3,
					name: '送风'
				}, {
					id: 4,
					name: '除湿'
				}],
				searchData: '',
				popupSearchData: '',
				form: {
					brightness: 0,
					color: 0,
					time: 0
				},
				value_light: '',
				color: '',
				delayTime: '',
				activeClass: 0,
				imgUrl: this.$config.BASE_imgUrl,
				classList: [{
					name: '门禁',
					type: '1',
					id: 'ob_face_machine',
					activeClass: 0,
					noneIcon: enterNoneActiveIcon,
					icon: enterIcon
				}, {
					name: '灯具',
					type: '2',
					id: 'ob_lighting',
					activeClass: 1,
					noneIcon: lightNoneActiveIcon,
					icon: lightIcon
				}, {
					name: '空调',
					type: '3',
					id: 'ob_airconditioner_detail',
					activeClass: 2,
					noneIcon: airNoneActiveIcon,
					icon: airIcon
				}],
				menjingTime: '60',
				guangGaiTime: '5',
				activeAddress: 0,
				deviceInfoList: [],
				siteInfoList: [],
				oldSiteInfoList: [],
				siteSelect: [],
				nowSiteCode: {},
				scrollViewHeight: 0,
				bottomHeight: 0,
				itemArray: [],
				page: 0,
				device_id: '',
				limit: 40,
				sitePage: 0,
				siteLimit: 40,
				seriaId: '',
				ktParam: {
					control_t40: '0', // 远程锁定
					control_t51: '1', // 模式
					control_t52: '1', // 风速
					param_t1: '26' // 温度
				},
				isSiteIdx: null,
			}
		},
		computed: {
			//get set写法有问题
			siteName() {
				console.log('查看下有没有进来', this.siteSelect)
				let name = ''
				// get:()=>{
				// 	for(let item of this.siteSelect){
				// 		console.log('computed',item.site_name)
				// 		name +=item.site_name
				// 		// name += '/'
				// 	}
				// 	return name
				// }
				// set:(val)=>{
				// 	console.log(val)
				// }
				for (let item of this.siteSelect) {
					console.log('computed', item.site_name)
					name += item.site_name
					// name += '/'
				}
				return name || '选择楼栋'
			},
			listItemClassName() {
				console.log('activeClass', this.activeClass)
				let cardStyleName = ''
				//activeClass 0 ,1 ,2 分别代表门禁，灯具，空调
				if (this.activeClass === 0) {
					cardStyleName = "background-image: url('https://ibms.on-bright.com:8000/wx/door-pass-bkg.png')"
				}
				if (this.activeClass === 1) {
					cardStyleName = "background-image: url('https://ibms.on-bright.com:8000/wx/light-ctr-bkg.png')"
				}
				if (this.activeClass === 2) {
					console.log(22222, this.deviceInfoList)
					this.deviceInfoList.forEach(item => {
						if (item.conditioner_status === '1') {
							cardStyleName =
								"background-image: url('https://ibms.on-bright.com:8000/wx/air-bkg.png')"
						} else if (item.conditioner_status === '2') {
							cardStyleName =
								"background-image: url('https://ibms.on-bright.com:8000/wx/sun-bkg.png')"
						} else if (item.conditioner_status === '3') {
							cardStyleName =
								"background-image: url('https://ibms.on-bright.com:8000/wx/wind-bkg.png')"
						}
					})
				}
				return cardStyleName
			}
		},
		onLoad() {
			this.initData();
		},
		mounted() {
			this.$util.getHeightWithTopEl(".main-content").then(height => {
				this.$util.getElRect('.foot').then(item => {
					console.log('item==>>>', item)
					this.scrollViewHeight = height - item.height;
					console.log('ces', this.scrollViewHeight)
				})
			});
		},
		methods: {
			inputChange(e) {
				// console.log('搜索框筛选',this.deviceInfoList)
				// console.log('临时筛选',this.tempList)
				console.log('搜索框筛选', this.deviceInfoList)
				console.log('临时筛选', this.tempList)
				this.searchData = e
				this.page = 0;
				this.isSiteAll = false;
				this.isAll = false;
				this.getDeviceInfo()

			},
			changeOpenCtrl(e) {
				this.openCtrl = e
				this.deviceCtrlHandle2()
			},
			changeAirCtrl(e) {
				this.airCtrl = e
				this.deviceCtrlHandle2()
				this.page = 0
				this.isAll = false;
				this.getDeviceInfo()
			},
			changeTemperature(e) {
				this.deviceCtrlHandle2()
				this.page = 0
				this.isAll = false;
				this.getDeviceInfo()
			},
			toggleAir(content, index) {
				this.airSelectIndex = content.id
				this.page = 0
				this.isAll = false;
				this.deviceCtrlHandle2()
				this.getDeviceInfo()
			},
			toggleSpeed(content, index) {
				this.airSpeedSelectIndex = content.id
				this.page = 0
				this.isAll = false;
				this.deviceCtrlHandle2()
				this.getDeviceInfo()
			},
			change() {
				console.log(1111)
			},
			submit() {
				//灯控循环访问单独调接口
				// this.seriaId = this.itemArray[0]
				let dataObj = {
					cmd: "control",
					serialId: '',
					properties: this.form,
					userId: "",
					userName: ""
				}
				this.itemArray.forEach(item => {
					dataObj.serialId = item
					this.lightCtrl(dataObj)
				})
			},
			lightCtrl(dataObj) {
				let that = this
				uni.request({
					url: 'https://ibms.on-bright.com:8000/ob/iot/deviceControl',
					data: dataObj,
					method: 'POST',
					header: {
						'Content-Type': 'application/json' // 请求头设置为json格式
					},
					success: function(res) {
						console.log(111, that)
						that.$refs.menjin.close()
						// console.log('请求成功返回的值',that.messageData); // 请求成功的回调函数，输出响应数据
					},
					fail: function(err) {
						console.log(err); // 请求失败的回调函数，输出错误信息
					}
				})
			},
			initData() {
				this.getDeviceInfo();
			},
			loadMoreSite() {
				if (this.isSiteAll) return;
				this.sitePage++;
				this.getAreaInfo(this.historyLevel, this.historyCode)
			},
			getAreaInfo(level, supeCode) {
				console.log(this.isSiteIdx, 'this.isSiteIdx');
				console.log('this.siteInfoList', this.siteInfoList);
				this.historyLevel = level;
				this.historyCode = supeCode;
				this.$api.baseData_getPdDeviceSite({
					site_id: supeCode || '',
					// site_level: supeCode ? '' : '0',
					start: this.sitePage * this.siteLimit,
					limit: this.siteLimit,
				}).then(res => {
					// console.log('site_info=====',res)
					if (res.site_info && res.site_info.length > 0) {
						if (this.sitePage == 0) {
							this.siteInfoList = res.site_info;
						} else {
							this.siteInfoList = this.siteInfoList.concat(res.site_info)
						}
						if (this.isSiteIdx != null) {
							this.siteInfoList[this.isSiteIdx].isSite = true
						} else {
							this.siteInfoList.forEach(item => {
								Object.assign(item, {
									isSite: false
								})
							})
						}

						// console.log('this.siteInfoList',this.siteInfoList);
					} else {
						this.isSiteAll = true;
					}
				})
			},
			selectAreaHandle(item) {

				let lastSite = null
				if (this.siteSelect.length > 0) {
					lastSite = this.siteSelect[this.siteSelect.length - 1];
				}
				if (lastSite && lastSite.site_level == item.site_level) {
					this.siteSelect.pop()
				}
				// this.nowSiteCode = item

				// 初始化一个变量用于存储旧的站点索引
				let oldIdx = null
				// 遍历siteInfoList，寻找之前的站点索引并更新isSiteIdx
				this.siteInfoList.some((item, index) => {
					if (item.isSite) {
						oldIdx = index
						// 更新isSiteIdx为当前站点索引
						this.isSiteIdx = index
						// 一旦找到，立即终止循环
						return true;
					}
					return false;
				})
				// 获取当前点击站点的索引
				const newIdx = this.siteInfoList.indexOf(item)
				if (newIdx != -1) {
					// 比较新旧索引，如果相同，则切换当前站点的isSite值
					if (oldIdx == newIdx) {
						this.siteInfoList[oldIdx].isSite = !this.siteInfoList[oldIdx].isSite
						// 如果当前站点不再被选中，重置isSiteIdx
						if (!this.siteInfoList[oldIdx].isSite) {
							this.isSiteIdx = null
						}
					} else {
						// 如果旧索引存在，将旧站点的isSite设置为false
						if (this.siteInfoList[oldIdx]) {
							this.siteInfoList[oldIdx].isSite = false
						}
						// 更新isSiteIdx为新站点索引
						this.isSiteIdx = newIdx
						// 将新站点的isSite设置为true
						this.siteInfoList[newIdx].isSite = true
					}
				}


				// 重置sitePage，表示从第一页开始加载
				this.sitePage = 0
				// 根据当前选中的站点更新nowSiteCode和siteSelect
				if (this.siteInfoList[newIdx].isSite) {
					this.nowSiteCode = item
					// 将当前站点添加到siteSelect数组中
					this.$set(this.siteSelect, 0, item)
				} else {
					// 如果新站点未被选中，重置nowSiteCode和siteSelect的第一个元素
					this.nowSiteCode = {}
					// 设置siteSelect的第一个元素为选择楼栋的提示项
					this.$set(this.siteSelect, 0, {
						site_name: '选择楼栋'
					})
				}
				// this.$set(this.siteSelect, 0, item)
				// console.log(11111111,this.siteSelect)
				// console.log('111111',this.nowSiteCode)
				// this.getDeviceInfo();
				this.page = 0;
				this.isSiteAll = false;
				this.isAll = false;
				this.getDeviceInfo();
			},
			backArea(index) {
				// console.log('22222222qqqq',index);
				this.siteSelect.splice(index)
				console.log(this.siteSelect)
				this.sitePage = 0;
				this.isSiteAll = false;
				this.isAll = false;
				if (this.siteSelect.length > 0) {
					let lastSite = this.siteSelect[this.siteSelect.length - 1];
					this.nowSiteCode = lastSite
					this.getAreaInfo(lastSite.site_level + 1, lastSite.site_code)
				} else {
					this.nowSiteCode = {}
					this.getAreaInfo(0, null);
				}
				this.page = 0;
				this.isAll = false;
				this.getDeviceInfo();
			},
			openAreaSelect() {
				this.sitePage = 0;
				this.isSiteAll = false;
				// console.log('看看是什么列表',this.siteSelect)
				if (this.siteSelect.length > 0) {
					let lastSite = this.siteSelect[this.siteSelect.length - 1];
					this.getAreaInfo(lastSite.site_level + 1, lastSite.site_code)
				} else {
					this.getAreaInfo(0, null);
				}
				this.$refs.areaSelectPopup.open()
			},
			confirmArea() {
				this.$refs.areaSelectPopup.close()
			},
			getDeviceInfo() {
				// console.log('this.nowSiteCode',this.nowSiteCode);
				if (this.isAll) return
				this.$api.baseData_getPdDeviceCardInfoBySiteId({
					params: "device_name,site_name",
					// params : ['device_name','site_name'],
					where_value: this.searchData,
					// start: this.page * this.limit,
					start: 0,
					limit: this.limit,
					site_id: this.nowSiteCode?.site_id || '',
					source_type: this.classList[this.activeClass].id,
				}).then(res => {
					// console.log('cascas', res.device_info)
					if (res.device_info.length == 0) {
						this.deviceInfoList = []
					} else {
						this.device_id = res.device_info[0].device_id
						this.cancelCheckbox();
						// console.log('页数',this.page)
						if (res.device_info) {
							if (res.device_info.length < this.limit) {
								this.isAll = true
							}
							for (let item of res.device_info) {
								item.isChecked = false
							}
							if (this.page > 0) {
								this.deviceInfoList = this.deviceInfoList.concat(res.device_info)
							} else {
								this.deviceInfoList = res.device_info
							}
							this.page++
						}
					}
				})
			},
			/**
			 * @param {Object} e
			 * 设备切换
			 */
			selName(e) {
				console.log(e)
				if (this.activeClass != e.activeClass) {
					this.activeClass = e.activeClass;
					this.page = 0;
					this.isAll = false;
					this.deviceInfoList = []
					this.getDeviceInfo()
				}
				// console.log(this.activeClass)
			},
			selAddr(e) {
				this.activeAddress = e.detail.value;
			},
			checkboxChange(e) {
				// console.log(this.deviceInfoList)
				// console.log(e)
				this.itemArray = e
				// this.itemArray = e.detail.value;
				// this.changeCheckbox(true)
				// console.log('------>>>>',this.itemArray)
			},
			checkChange(content) {
				// console.log(content)
				content.isChecked = !content.isChecked
				// console.log(content.isChecked)
			},
			cancelCheckbox() {
				this.changeCheckbox(false)
				this.itemArray = []
				// console.log('------>>>>',this.itemArray)
			},
			//取消全部
			changeCheckbox(flag) {
				this.deviceInfoList.forEach(item => {
					item.isChecked = flag
				})
				console.log(this.deviceInfoList)
				// let item  = 0
				// for(item ; item < this.deviceInfoList.length ; item++ ){
				// 	console.log(item)
				// }
				// for(let item of this.itemArray){
				// 	console.log('this.deviceInfoList',this.deviceInfoList,item)
				// 	// this.deviceInfoList[parseInt(item)].isChecked = flag;
				// }
			},
			openDialog() {
				if (this.itemArray.length == 0) {
					this.$util.toast('请选择需要控制设备')
					return
				}
				if (this.activeClass !== 2) {
					this.$refs.menjin.open();
				}
				if (this.activeClass === 2) {
					let arr = []
					for (let i = 0; i < this.itemArray.length; i++) {
						let list = this.deviceInfoList.filter((item) => {
							return item.serial_id === this.itemArray[i]
						})
						arr.push(...list)
					}
					// 检查是否存在状态为真的字段
					let fieldIsTrue = this.checkFieldTrue(arr, 'on_off');
					this.airCtrl = fieldIsTrue
					this.show = true,
						this.airSelectIndex = 1,
						this.airSpeedSelectIndex = 4,
						this.openCtrl = false,
						this.$refs.kongtiao.open();
				}
			},
			// 判断数组中是否存在至少一个对象具有特定字段且为真
			checkFieldTrue(arr, field) {
				for (var i = 0; i < arr.length; i++) {
					if (arr[i].hasOwnProperty(field) && arr[i][field] === '1') {
						return true; // 如果存在该字段且为真，返回true
					}
				}
				return false; // 如果数组中不存在具有该字段且为真的对象，返回false
			},
			deviceCtrlHandle(ctrl) {
				let deviceType = this.classList[this.activeClass].type;
				if (deviceType == '4') {
					// 灌溉
					if (ctrl == 0) {
						// 关闭
						this.controlGG(false)
					} else {
						// 打开
						if (!this.guangGaiTime) {
							this.$util.toast('请输入灌溉时长')
							return
						}
						this.controlGG(true)
					}
				} else if (deviceType == '1') {
					// 门禁
					this.controlMJ()
				} else if (deviceType == '5' || deviceType == '6') {
					// 停车场
					this.controlTCC(ctrl)
				} else if (deviceType == '3') {
					// 空调
					this.controlKT(ctrl);
				} else if (deviceType == '2') {
					// 照明
					this.controlZM(ctrl);
				}

			},
			deviceCtrlHandle2(ctrl) {
				// console.log(333,this.itemArray)
				const toStringArray = this.itemArray.join('#')
				const dataObj = {
					action: this.openCtrl ? 'Set' : 'Lock', //开关控制
					onOff: this.airCtrl ? 1 : 0, //空调开关控制
					workMode: this.airSelectIndex, //模式
					temp: this.temperature,
					speed: this.airSpeedSelectIndex,
					selectedAc: toStringArray, // 空调对应地址
				}
				//设备控制对接接口，等真实使用时才放开
				this.airConditioner(dataObj)

				// console.log(11222,dataObj)
				// console.log(222,toStringArray)
				// if(ctrl === 0) {
				// 	const dataObj = {
				// 		action: 'Set',
				// 		onOff :1,
				// 		selectedAc:toStringArray
				// 	}
				// 	this.airConditioner(dataObj)
				// }else if(ctrl === 1){
				// 	const dataObj = {
				// 		action: 'Set',
				// 		onOff :0,
				// 		selectedAc:toStringArray
				// 	}
				// 	this.airConditioner(dataObj)
				// }else if(ctrl === 2){
				// 	const dataObj = {
				// 		action: 'Lock',
				// 		onOffLock:1,
				// 		onOff :1,
				// 		selectedAc:toStringArray
				// 	}
				// 	this.airConditioner(dataObj)
				// }else if(ctrl === 3){
				// 	const dataObj = {
				// 		action: 'Lock',
				// 		onOffLock:1,
				// 		onOff :0,
				// 		selectedAc:toStringArray
				// 	}
				// 	this.airConditioner(dataObj)
				// }else if(ctrl === 4){
				// 	const dataObj = {
				// 		selectedAc:toStringArray
				// 	}
				// 	this.airLock(dataObj)
				// }
			},
			airConditioner(dataObj) {
				let that = this
				uni.request({
					url: 'https://ibms.on-bright.com:8000/ob/airCondition/conditionerControl',
					data: dataObj,
					method: 'POST',
					header: {
						'Content-Type': 'application/json' // 请求头设置为json格式
					},
					success: function(res) {
						let obj = {
							type: 'default',
							message: res.data.msg,
						}
						console.log(res)
						that.$refs.uToast.show({
							...obj
						})
						// that.$refs.kongtiao.close();
						// console.log('请求成功返回的值',that.messageData); // 请求成功的回调函数，输出响应数据
					},
					fail: function(err) {
						console.log(err); // 请求失败的回调函数，输出错误信息
					}
				})
			},
			airLock(dataObj) {
				let that = this
				uni.request({
					url: 'https://ibms.on-bright.com:8000/ob/airCondition/conditionerUnlock',
					data: dataObj,
					method: 'POST',
					header: {
						'Content-Type': 'application/json' // 请求头设置为json格式
					},
					success: function(res) {
						console.log(res)
						that.$refs.kongtiao.close();
						// console.log('请求成功返回的值',that.messageData); // 请求成功的回调函数，输出响应数据
					},
					fail: function(err) {
						console.log(err); // 请求失败的回调函数，输出错误信息
					}
				})
			},
			// 停车场控制
			controlTCC(ctrl) {
				let deviceType = this.classList[this.activeClass].type;
				let time = moment().format('YYYY-MM-DD HH:mm:ss');
				let time2 = moment().format('YYYYMMDDHHmmss');
				let params = {
					SubSystem: deviceType == '6' ? 1 : 2,
					Order: ctrl == 1 ? 1 : 2,
					OrderDate: time,
					OrderRemark: 'app远程控制开门',
					Gid: "B3724B5C-0D59-4F58-A632-DBF2DCAC1AC8",
					IsLogHandGate: true,
					ID: time2,
					IsLegal: true
				}
				for (let item of this.itemArray) {
					let device = this.deviceInfoList[parseInt(item)]
					params.DevId = deviceType == '6' ? device.lighting_area_id : device.device_code
					params.Parameter = device.device_code
					params.Rid = device.device_code
					console.log('res======deviceCtrl停车场门', params)
					this.$util.deviceCtrl('2', params).then((res) => {
						console.log('res======deviceCtrl', res)
					})
				}
				this.$refs.menjin.close();
				this.$util.toast('操作成功')
			},
			// 门禁控制
			controlMJ() {
				let params = {
					func: '',
					interval: this.menjingTime || '60',
				}
				let that = this
				for (let item of this.itemArray) {
					// let device = this.deviceInfoList[parseInt(item)]
					// params.doorId = device.device_code
					console.log('res======deviceCtrl门禁', item)
					// this.$util.deviceCtrl('1', params).then((res)=>{
					// 	console.log('res======deviceCtrl', res)
					// })
					// this.$util.deviceCtrl('/ob/access/openDoor',item).then((res)=>{
					// 	console.log('new new new', res)
					// })
					uni.request({
						url: 'https://ibms.on-bright.com:8000/ob/access/openDoor',
						data: {
							serial_id: item
						},
						method: 'POST',
						header: {
							'Content-Type': 'application/json' // 请求头设置为json格式
						},
						success: function(res) {
							console.log(res)
							that.$refs.menjin.close();
							that.$util.toast('操作成功')
							// console.log('请求成功返回的值',that.messageData); // 请求成功的回调函数，输出响应数据
						},
						fail: function(err) {
							console.log(err); // 请求失败的回调函数，输出错误信息
						}
					})
				}

			},
			// 灌溉控制
			controlGG(flag) {
				let params = {}
				for (let item of this.itemArray) {
					let device = this.deviceInfoList[parseInt(item)]
					let pp = device.device_code.split('-');
					params.sn = pp[0]
					params.zones = pp[1]
					if (flag) {
						params.times = this.guangGaiTime
					}
					console.log('res======deviceCtrl灌溉', params)
					// this.$util.deviceCtrl(flag ? '4-1' : '4-2', params).then((res)=>{
					// 	console.log('res======deviceCtrl', res)
					// })
					this.$util.deviceCtrl('/ob/access/openDoor', this.device_id).then((res) => {
						console.log('new new new', res)
					})
				}
				this.$refs.menjin.close();
				this.$util.toast('操作成功')
			},
			setKTParam(key, value) {
				console.log('======.>>', value)
				this.ktParam[key] = value
			},
			// 空调控制
			controlKT(ctrl) {
				let params = {
					deviceType: 4,
					softStartup: false,
					params: {
						control_t31: ctrl,
					},
				}
				for (let item of this.itemArray) {
					let device = this.deviceInfoList[parseInt(item)]
					let pp = device.device_code.split('-');
					params.gatewayMac = device.lighting_area_id
					params.gatewayNum = pp[1]
					params.devices = [{
						systemNum: pp[0],
						deviceNum: pp[2]
					}]
					console.log('res======deviceCtrl空调', params)
					// params.params = {control_t31: ctrl}
					this.$util.deviceCtrl('3', params).then((res) => {
						console.log('res======deviceCtrl', res)
					})
					if (ctrl == 1) {
						let wd = this.ktParam.param_t1 * 10
						params.params = {
							...this.ktParam,
							control_t40: 0,
							param_t1: wd
						}
						this.$util.deviceCtrl('3', params).then((res) => {
							console.log('res======deviceCtrl', res)
						})
					}
				}
				this.$refs.kongtiao.close();
				this.$util.toast('操作成功')
			},
			// 照明控制
			controlZM(ctrl) {
				let time = moment().format('YYYYMMDDHHmmss');
				let timeStr = moment().format('YYYY-MM-DD HH:mm:ss');
				let params = {
					no: time,
					func: "control",
					business: "light",
					type: "preset",
					// areaId:1,
					// presetId:101,
					time: timeStr,
				}
				// 01 全开、02、全关、03、半开
				// console.log('itemArray',this.itemArray)
				// for(let item of this.itemArray){
				// 	let device = this.deviceInfoList[parseInt(item)]
				// 	console.log('device',device)
				// 	params.areaId = device.lighting_area_id
				// 	params.presetId = device.device_code + ctrl
				// 	console.log('res======deviceCtrl照明', params)
				// 	// this.$util.deviceCtrl('5', params).then((res)=>{
				// 	// 	console.log('res======deviceCtrl', res)
				// 	// })

				// }


				this.$refs.menjin.close();
				this.$util.toast('操作成功')
			},
			popupSearch(){
				this.$api.baseData_getPdDeviceSite({
					site_id: '',
					// site_level: supeCode ? '' : '0',
					start: 0,
					limit: 9999,
				}).then(res =>{
					this.siteInfoList = res.site_info.filter(item => item.site_name.includes(this.popupSearchData))
				})
			},
			popupSearchClear(){
				this.sitePage = 0
				this.getAreaInfo(0, null)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.area-list {
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		background-color: #FFFFFF;
		height: 80vh;

		.title {
			font-weight: 500;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 1px solid #f8f8f8;
		}

		.area-select-content {
			display: flex;
			background-color: #F8F8F8;

			.select-text {
				width: 80rpx;
				padding: 0 10rpx;
				color: #666666;
				line-height: 80rpx;
				font-size: 26rpx;
			}
		}

		.area-select-scroll {
			width: 650rpx;
			height: 80rpx;
			flex-direction: row;
			white-space: nowrap;
		}

		.area-select {
			height: 80rpx;

			padding: 0 20rpx;
			display: inline-block;
			flex-wrap: nowrap;
			box-sizing: border-box;
			color: #666666;
			line-height: 80rpx;
			font-size: 26rpx;

			// border-bottom: 1px solid #f8f8f8;
			.select-item {
				flex-wrap: nowrap;
				white-space: nowrap;
				// min-width: 100rpx;
			}

			.select-item:after {
				// content: '/';
				margin: 0 20rpx;
				color: #2C72FF;
			}
		}

		.list-content-scroll {
			height: calc(80vh - 80rpx - 80rpx - 130rpx);

			.list-content {
				.list-item {
					height: 80rpx;
					// line-height: 80rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-left: 32rpx;
					font-size: 26rpx;
					border-bottom: 1rpx solid #F8F8F8;
				}
			}
		}
	}

	::v-deep .uni-checkbox-input {
		border-radius: 50%;
	}

	// .body{
	// 	height: calc(100vh - 45px);
	// 	position: relative;
	// }
	.content {
		display: flex;

		.left-wrap {
			width: 180rpx;

			// background-color: white;
			.tab-list {
				margin-top: 24rpx;

				.tab-item {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					padding-bottom: 68rpx;

					.active {
						color: #047AFE;
					}

					.none-active {
						color: #666666;
					}
				}
			}
		}

		.right-wrap {
			flex: 1;
			background-color: white;
		}

		.enterStatus {
			width: 32rpx;
			height: 32rpx;

			&-active {
				background-image: url('@/static/equControl/entranceActive.png');
			}

			&-noneActive {
				background-image: url('@/static/equControl/entranceNoneActive.png');
			}
		}
	}

	.tab-box {
		display: flex;
		margin-left: 28rpx;
		margin-top: 28rpx;
		gap: 28rpx;
	}

	.select {
		height: 90rpx;
		// padding: 0 30rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		color: #333333;
		font-weight: 400;
		// background: #FFFFFF;
		background-image: url('@/static/equControl/selectBox.png');
		width: 198rpx;
		height: 50rpx;
		background-size: 100% 100%;


		.className,
		.address {
			display: flex;
			align-items: center;
			gap: 10rpx;

			.text {
				// margin-right: 30rpx;
			}
		}

		.className {
			margin-right: 80rpx;
		}
	}

	.search {
		background-image: url('@/static/equControl/searchBox.png');
		width: 272rpx;
		height: 50rpx;
		background-size: 100% 100%;
		position: relative;

		.input-icon {
			position: absolute;
			width: 32rpx;
			height: 32rpx;
			top: 10rpx;
			left: 28rpx;
		}
	}

	.main-content {
		padding: 0 30rpx;
		margin-top: 20rpx;

		.list {
			// display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			position: relative;

			// padding:20rpx 0;
			.list-item {
				width: 514rpx;
				// height: 216rpx;
				border-radius: 8rpx;
				background-color: #FFFFFF;
				// background-image: url('/static/menjin-bg@3x.png');
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-position: center;
				margin-bottom: 28rpx;
				padding: 20rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.item-title-none-active {
					// margin-left: 20rpx;	
					font-size: 28rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 400;
					color: #333333;
				}

				.item-title-active {
					// margin-left: 20rpx;	
					font-size: 28rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 400;
					color: #ffffff;
				}

				.address {
					font-size: 28rpx;
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 400;
					color: #666666;
					padding-top: 20rpx;
				}
			}

			//门禁
			//bkg000  前面bkg为统称 后面0分别代表  当前选中栏 ，开关状态 ，空调运行状态
			.bkg000 {
				background-image: url('https://ibms.on-bright.com:8000/wx/door-pass-bkg.png');
			}

			//灯具
			.bkg100 {
				background-image: url('https://ibms.on-bright.com:8000/wx/light-ctr-bkg.png');
			}

			//空调-停止 制冷
			.bkg201 {
				background-image: url('https://ibms.on-bright.com:8000/wx/none-air-bkg.png');
			}

			//空调-运行 制冷
			.bkg211 {
				background-image: url('https://ibms.on-bright.com:8000/wx/air-bkg.png');
			}

			//空调-停止 制热
			.bkg202 {
				background-image: url('https://ibms.on-bright.com:8000/wx/none-sun-bkg.png');
			}

			//空调-运行 制热
			.bkg212 {
				background-image: url('https://ibms.on-bright.com:8000/wx/sun-bkg.png');
			}

			//空调-停止 送风
			.bkg203 {
				background-image: url('https://ibms.on-bright.com:8000/wx/none-wind-bkg.png');
			}

			//空调-运行 送风
			.bkg213 {
				background-image: url('https://ibms.on-bright.com:8000/wx/wind-bkg.png');
			}

			//空调-停止 除湿
			.bkg204 {
				background-image: url('https://ibms.on-bright.com:8000/wx/none-water-bkg.png');
			}

			//空调-运行 除湿
			.bkg214 {
				background-image: url('https://ibms.on-bright.com:8000/wx/water-bkg.png');
			}

			//空调-故障
			.bkg230 {
				background-image: url('https://ibms.on-bright.com:8000/wx/breakdown.png');
			}
		}
	}

	.foot {
		height: 150rpx;
		width: 100%;
		box-sizing: border-box;
		// position: absolute;
		// bottom: 0;
		background: #FFFFFF;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.text {
			font-size: 28rpx;
			color: #333333;
			font-weight: 400;
		}

		.num {
			color: #2C72FF;
		}

		.submit {
			height: 70rpx;
			width: 360rpx;
			color: #FFFFFF;
			line-height: 70rpx;
			background-image: linear-gradient(134deg, #31AFFF 0%, #1677FF 100%);
			border-radius: 70rpx;
			font-size: 28rpx;
			color: #FFFFFF;
			font-weight: 400;
		}
	}

	.popup-box {
		min-height: 380rpx;
		width: 80vw;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 0 30rpx 30rpx;
		box-sizing: border-box;
		position: relative;

		.air-box {
			.ctrl {
				position: relative;

				//遮罩层
				.over-load {
					position: absolute;
					height: 100%;
					border-radius: 23rpx;
					width: 100%;
					padding: 10rpx;
					/* padding: 180rpx 50rpx; */
					/* padding: 10rpx 10rpx; */
					top: -8rpx;
					left: -13rpx;
					background-color: rgba(0, 0, 0, 0.5);
					z-index: 999;
				}
			}

			.air-row {
				display: flex;
				justify-content: space-between;
				margin-top: 10rpx;
				margin-bottom: 20rpx;
			}

			.title {
				margin-top: 20rpx;
			}

			.air-mode-list {
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
				// display: flex;
				border-radius: 5rpx;
				// justify-content: center;
				// align-items: center;
				margin-top: 20rpx;
				font-size: 24rpx;

				.air-mode-btn {
					border: 1rpx solid #ffffff;
					color: #ffffff;
					padding-left: 20rpx;
					padding-right: 20rpx;
					padding-top: 10rpx;
					padding-bottom: 10rpx;
					text-align: center;
				}

				.air-mode-btn:first-child {
					border-top-left-radius: 10rpx;
					border-bottom-left-radius: 10rpx;
				}

				.air-mode-btn:last-child {
					border-top-right-radius: 10rpx;
					border-bottom-right-radius: 10rpx;
				}

				.air-active {
					background-color: #13c75b;
				}

				.noneAir-active {
					background-color: #888888;
				}
			}
		}

		.close-icon {
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			top: 30rpx;
			right: 30rpx;
		}

		.dialog-log {
			text-align: center;

			.img-icon {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-top: -40rpx;
			}
		}

		.popup-title {
			text-align: center;
			font-size: 32rpx;
			color: #333333;
			font-weight: 600;
		}

		.menjin-content {
			margin-top: 30rpx;
			display: flex;
			align-items: center;

			.time-input {
				height: 80rpx;
				flex: 1;
				border-radius: 12rpx;
				background: #F8F8F8;
				padding: 0 20rpx;
			}

			::v-deep .placeholder-custom {
				text-align: center;
				font-size: 28rpx;
			}
		}



		.zhaoming-close {
			text-align: center;
			margin-top: 60rpx;
		}
	}

	.footer {
		font-size: 28rpx;
		width: 100%;
		// height: 150rpx;
		margin-top: 40rpx;
		display: grid;
		grid-template-columns: auto auto;
		grid-column-gap: 10px;
		grid-row-gap: 10px;
		// display: flex;
		// flex-wrap: wrap;
		// justify-content: space-around;
		// align-items: center;

		.btn-close {
			margin: 0;
			background: #EFF4FF;
			border-radius: 6rpx;
			flex: 1;
			height: 80rpx;
			line-height: 80rpx;
			color: #2C72FF;
		}

		.btn-open {
			margin: 0;
			margin-right: 10rpx;
			border-radius: 6rpx;
			flex: 1;
			height: 80rpx;
			line-height: 80rpx;
			color: #FFFFFF;
			background: #2C72FF;
		}
	}

	.btn-pass {
		margin: 0;
		margin-right: 10rpx;
		border-radius: 6rpx;
		flex: 1;
		height: 80rpx;
		line-height: 80rpx;
		color: #FFFFFF;
		background: #047AFE;
		border-radius: 38rpx;
		margin-top: 80rpx;
	}

	.popup-box-kong {
		min-height: 51vh;
		width: 100%;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;
		padding: 0 30rpx 30rpx;
		box-sizing: border-box;
		font-size: 28rpx;

		.dialog-top {
			display: flex;
			height: 90rpx;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;

			.close {
				color: #333333;
				font-weight: 400;
				width: 120rpx;
			}

			.title {
				font-weight: 600;
			}

			.btn-submit {
				color: #2C72FF;
				width: 120rpx;
				text-align: right;
			}
		}

		.shezhi {
			font-weight: 600;
			padding: 20rpx 0;
		}

		.scroll-X {
			white-space: nowrap;
			padding: 20rpx 0;

			.item {
				display: inline-block;
				margin-right: 60rpx;

				.icon-img {
					vertical-align: middle;
					width: 60rpx;
				}

				.active {
					margin-left: 20rpx;
					color: #2C72FF;
					vertical-align: middle;
				}

				.text {
					margin-left: 20rpx;
					color: #333333;
					vertical-align: middle;
				}

				&:last-child {
					margin: 0;
				}
			}
		}

		.moshi {
			margin: 20rpx 0;
			font-size: 28rpx;
			color: #333333;
			display: flex;
			justify-content: space-between;

			.col {
				// width: 49%;
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				.title {
					width: 100%;
					font-weight: 600;
				}

				.item-list {
					display: flex;
					justify-content: space-between;
					margin-top: 30rpx;
					width: 100%;

					.item {
						padding: 20rpx;
						background: #F8F8F8;
						border-radius: 6px;

					}

					.active {
						background: #EFF5FF;
						color: #2C72FF;
					}
				}
			}
		}

		.switch {
			margin: 40rpx 0;
			text-align: center;
		}

		.bottom-block {
			width: 260rpx;
			height: 10rpx;
			background: #333333;
			border-radius: 6rpx;
			position: relative;
			left: 0;
			top: 0;
			margin: auto;
		}
	}
</style>